<template>
  <div>
    <div class="login-bg"></div>

    <div class="login-card">
      <div class="login-form">
        <div class="login-input-wrap">
          <text class="login-icon">&#xe7ae;</text>
          <input ref="inputName"
                 class="login-input"
                 placeholder="请输入手机号码"
                 return-key-type="next"
                 v-model="loginName"
                 @focus="onNameFocus"
                 @blur="onNameBlur" />
          <text class="login-icon login-icon-dismiss"
                v-if="isNameDismiss"
                @click="onNameDismiss">&#xe844;</text>
        </div>

        <div class="login-input-wrap">
          <text class="login-icon">&#xe613;</text>
          <input ref="inputSecret"
                 placeholder="请输入密码"
                 return-key-type="done"
                 type="password"
                 class="login-input"
                 v-model="loginSecret"
                 @focus="onPasswordFocus"
                 @blur="onPasswordBlur"
                 @return="login" />
          <text class="login-icon login-icon-dismiss"
                v-if="isPasswordDismiss"
                @click="onPasswordDismiss">&#xe844;</text>
        </div>

        <div class="login-function">
          <text class="login-gray"
                @click="goForgetPwd">忘记密码？</text>
          <!-- <text class="login-gray" @click="goSignup">新用户注册</text> -->
        </div>
      </div>
    </div>

    <div class="login-head">
      <image class="login-img"
             src="bmlocal://assets//logo_text.png"></image>
    </div>

    <div class="login-btn">
      <wxc-button text="登 录"
                  class="login-wxc-btn"
                  type="green"
                  :disabled="logining"
                  @wxcButtonClicked="login"></wxc-button>
    </div>

  </div>
</template>
<script>
import { WxcButton } from 'weex-ui'
import { trim } from '../../plugins/utils.js'
import { STORAGE_TOKEN, STORAGE_LOGIN } from '../../plugins/constant'

export default {
  components: {
    WxcButton
  },

  props: {},
  data() {
    return {
      loginName: '',
      loginSecret: '',
      isNameFocus: false,
      isPasswordFocus: false,
      logining: false
    }
  },

  computed: {
    isNameDismiss() {
      return this.loginName && this.isNameFocus
    },

    isPasswordDismiss() {
      return this.loginSecret && this.isPasswordFocus
    }
  },

  // beforeCreate: function () {
  //   var domModule = weex.requireModule('dom')
  //   domModule.addRule('fontFace', {
  //     fontFamily: 'alicon',
  //     'src': `url('${ICONFONT_URL}')`
  //   })
  // },

  created() {
    this.androidFinishApp()
    this.setNavigationInfo()
  },

  methods: {
    androidFinishApp() {
      const globalEvent = weex.requireModule('globalEvent')
      globalEvent.addEventListener('homeBack', options => this.$router.finish())
    },

    // 修改 wxframework\eros-framework\src\main\java\com\eros\framework\model\RouterModel.java
    // 默认值 statusBarStyle = 'LightContent'
    setNavigationInfo() {
      this.$navigator.setNavigationInfo({
        title: '',
        navShow: false,
        statusBarStyle: 'LightContent'
      })
    },

    login() {
      // 验证用户名为空
      const name = trim(this.loginName)
      if (!name) {
        this.$notice.toast({ message: '请输入手机号码' })
        return this.$refs.inputName.focus()
      }

      // 验证密码为空
      const password = trim(this.loginSecret)
      if (!password) {
        this.$notice.toast({ message: '请输入密码' })
        return this.$refs.inputSecret.focus()
      }

      // 收起键盘
      this.$tools.resignKeyboard()

      // 登录
      this.logining = true
      this.$notice.loading.show('登录中...')
      this.$http({
        method: 'POST',
        name: 'auth.login',
        data: {
          loginName: this.loginName,
          loginSecret: this.loginSecret,
          orgClassType: 1
        }
      }).then(res => {
        this.$storage.setSync(STORAGE_TOKEN, res.access_token)

        // 避免storage重复和太大，STORAGE_LOGIN删除token
        delete res.access_token
        delete res.refresh_token
        try {
          this.$storage.setSync(STORAGE_LOGIN, res)
        } catch (error) {
          // this.$notice.toast({ message: JSON.stringify(error) })
        }

        this.$router.setHomePage('tabBar')
      }, err => {
        let message = '用户名或密码错误，请重新填写！'
        if (!err) {
          message = '登录出错，请重试！'
        } else if (err.status >= 500) {
          message = '服务器正在维护，请稍后重试！'
        }
        this.$notice.toast({ message: message })
        this.$refs.inputName.focus()
      }).then(() => {
        this.logining = false
        this.$notice.loading.hide()
      })
    },

    onNameFocus() {
      this.isNameFocus = true
    },

    onNameBlur() {
      this.isNameFocus = false
    },

    onPasswordFocus() {
      this.isPasswordFocus = true
    },

    onPasswordBlur() {
      this.isPasswordFocus = false
    },

    onNameDismiss() {
      this.loginName = ''
    },

    onPasswordDismiss() {
      this.loginSecret = ''
    },

    goForgetPwd() {
      this.$nav.open({
        name: 'user.phone.verify',
        params: {
          next: 'user.password.forget'
        }
      })
    },

    goSignin() {
      this.$nav.open({
        name: 'user.signup'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.login-bg {
  height: 360px;
  padding: 25px;
  background-image: linear-gradient(to bottom, $primary, $primary-light);
}

.login-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 12px #eee;
  margin-top: -100px;
  margin-left: 25px;
  margin-right: 25px;
}

.login-head {
  background-color: #fff;
  justify-content: center;
  padding: 30px;
  width: 200px;
  height: 200px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  margin-left: 275px;
  margin-bottom: 60px;
  margin-top: -520px;
}

.login-img {
  width: 140px;
  height: 160px;
}

.login-form {
  padding-top: 120px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
}

.login-input-wrap {
  flex-direction: row;
  padding-left: 25px;
  padding-right: 25px;
  background-color: #f2f5f6;
  border-radius: 8px;
  height: 84px;
  margin-bottom: 25px;
  justify-content: center;
}

.login-input {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 32px;
  height: 84px;
  line-height: 84px;
  flex: 1;
  tint-color: $primary;
}

.login-btn {
  margin-top: 285px;
  margin-left: 25px;
  margin-right: 20px;
  border-radius: 12px;
  // box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.login-wxc-btn {
  width: 700px;
  // background-color: $primary;
}

.login-function {
  flex-direction: row;
  justify-content: space-between;
}

.login-gray {
  color: #999;
  font-size: 26px;
}

.login-icon {
  font-size: 32px;
  width: 40px;
  color: $primary;
  height: 84px;
  line-height: 84px;
  font-family: alicon;
}

.login-icon-dismiss {
  color: #999;
}
</style>
